<template>
  <div class="desktop-filters">
    <!-- 分类筛选 -->
    <v-card
      flat
      class="mb-4"
      v-for="(item, index) in productClassifyData"
      :key="'pc-' + index"
    >
      <div
        class="h-12 d-flex justify-between items-center cursor-pointer hover:bg-gray-100"
        @click="toggleSection(item)"
      >
        <span>{{ item.name }}</span>
        <v-icon size="16">{{ item.isOpen ? "mdi-minus" : "mdi-plus" }}</v-icon>
      </div>
      <v-card-text v-if="item.isOpen" class="pt-3">
        <v-checkbox
          v-for="(subItem, subIndex) in item.children"
          :key="'child-' + subIndex"
          :label="subItem.name"
          class="h-8 mb-1"
          @change="(checked) => handleCheckboxChange(subItem, checked)"
        />
      </v-card-text>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, defineEmits } from "vue";
const { $axios } = useNuxtApp();

// const props = defineProps({});

// const sizeOpen = ref(true);
// const seriesOpen = ref(false);
// const widthOpen = ref(false);
// const disciplineOpen = ref(false);
// const availabilityOpen = ref(false);

const toggleSection = (item: any) => {
  item.isOpen = !item.isOpen;
};

// const searchParams = computed(() => {
//   return {
//     query: "",
//     page: 1,
//     pageSize: 8,
//     totalCount: 0,
//   };
// });

// 根据parentId构造tree
const buildTree = (data: any[], parentid = 0) => {
  const tree: any[] = [];
  data.forEach((item) => {
    item.isOpen = false;
    if (item.parentid === parentid) {
      const children = buildTree(data, item.cid);
      if (children.length > 0) {
        item.children = children;
      }
      tree.push(item);
    }
  });
  return tree;
};

const productClassifyData = ref<any[]>([]);
const dataLoad = ref<boolean>(false);
const fetchProductsClassifyData = async () => {
  try {
    dataLoad.value = false;
    // GET请求
    const { code, data } = await $axios.get<any>(
      "/getClassifyList?query=&page=1&pageSize=3000"
    );

    if (code === "200") {
      const newData = buildTree(data.dataList, 0);
      if (newData.length > 0) {
        newData[0].isOpen = true;
      }
      productClassifyData.value = newData;
      dataLoad.value = true;
    }

    console.log("获取数据成功 => ", productClassifyData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

const emit = defineEmits(["on-filters"]);
const searchFilters = ref<any>([]);
const handleCheckboxChange = (subItem: any) => {
  const checkedIndex = searchFilters.value.findIndex((item: any) => item.cid === subItem.cid);
  if (checkedIndex !== -1) {
    const delIndex = searchFilters.value.findIndex((item: any) => item.cid === subItem.cid);
    searchFilters.value = searchFilters.value.filter((item: any, index: number) => index !== delIndex);
  } else {
    searchFilters.value.push({
      cid: subItem.cid,
      name: subItem.name,
    });
  }
  emit("on-filters", searchFilters);
};



onMounted(() => {
  fetchProductsClassifyData();
});
</script>
